<template>
  <div id="lxzk_pie" :style="{ width: '100%', height: '250px' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = []
const colorList = ['#3bafff', '#F56C6C', '#f1bb4c']
export default {
  name: 'lxzk_pie',
  props: ['pieData'],
  data() {
    return {}
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('lxzk_pie'))
    echartData = this.pieData
    myChart.setOption({
      title: {
        text: '录像状况(台)',
        textStyle: {
          fontSize: 16,
          color: '#2F3033',
        },
      },
      legend: {
        show: true,
        orient: 'horizontal',
        icon: 'circle',
        left: '75%',
        // itemGap: 15,
        textStyle: {
          rich: {
            0: {
              color: colorList[0],
              fontSize: 12,
            },
            1: {
              color: colorList[1],
              fontSize: 12,
            },
          },
        },
        formatter: function (name) {
          for (let i = 0; i < echartData.length; i++) {
            if (name === echartData[i].name) {
              // return '{x|' + name + '}\n{' + i + '|' + echartData[i].value + '}项'
              // return name + '({' + i + '|' + echartData[i].value + '})'
              return name + ' ' + echartData[i].value
            }
          }
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      series: [
        // 主要展示层的
        {
          radius: ['0%', '80%'],
          center: ['50%', '50%'],
          type: 'pie',
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              },
            },
          },
          label: {
            normal: {
              position: 'inside',
              formatter: '{d}%',
            },
          },
          data: echartData,
        },
        // 边框的设置
        {
          radius: ['76%', '80%'],
          center: ['50%', '50%'],
          type: 'pie',
          animation: false,
          itemStyle: {
            normal: {
              color: 'rgba(250,250,250,0.5)',
            },
          },
          data: [{ value: 1 }],
        },
      ],
    })
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
<style lang="scss"></style>
